// 入口文件
import Vue from 'vue'
// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 安装路由
Vue.use(VueRouter)

// 导入格式化时间的插件
import moment from 'moment'

// 定义全局的过滤器
Vue.filter('dataFormat',function(dataStr,pattern="YYYY-MM-DD hh:mm:ss"){
	return moment(dataStr).format(pattern)
});

// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource
Vue.use(VueResource)
// 配置vuex的步骤
// 3.1 运行 cnpm i vuex -S
// 3.2 导入包
import Vuex from 'vuex'
// 3.3 注册vuex到vue中
Vue.use(Vuex)
// 每次刚进入 网站，肯定会先调用 main.js 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 store 中；
var carList=JSON.parse(localStorage.getItem('carList')||'[]');
// 3.4 new Vuex.Store() 实例，得到一个 数据仓储对象
var store=new Vuex.Store({
	state: {
		// 大家可以把 state 想象成 组件中的 data，专门用来存储数据的；
		// 如果在 组件中，想到访问，store 中的数据，只能通过 this.$store.state.*** 来访问；
		carList: carList // 将 购物车中的商品的数据，用一个数组存储起来，在 carList 数组中，存储一些商品的对象，咱们可以暂时将这个商品对象，设计成这个样子：{ id：商品的id，count：要购买的数量，price：商品的单价，selected：布尔值，是否选中商品 }
	},
	mutations: {
		// 注意：如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；
		// 注意：如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')；
		// 这种 调用 mutations 方法的格式，和 this.$emit('父组件中方法名') ；
		// 注意：mutations 的 函数参数列表中，最多支持两个参数，其中，参数1：是 state状态；参数2：通过 commit 提交过来的参数；
		addToCarList(state,goodsObj){
			// 点击加入购物车，把商品信息，保存到 store 中的carList上；
			// 分析：
			// 1. 如果购物车中，之前就已经有这个对应的商品了，那么只需要更新数量；
			// 2. 如果没有，则直接把 商品数据，push 到 car 中即可；

			// 假设 在购物车中，没有找到对应的商品
			var flag=false;
			state.carList.some(item=>{
				if(item.id==goodsObj.id){
					item.count+=parseInt(goodsObj.count);
					flag=true;
					return true;
				}
			});
			// 如果最终，循环完毕，得到的 flag 还是 false，则把商品数据直接 push 到 购物车中；
			if(!flag){
				state.carList.push(goodsObj);
			}
			// 当更新 carList 之后，把 carList 数组，存储到 本地的localStoreage 中
			localStorage.setItem('carList',JSON.stringify(state.carList));
		},
		updateGoodsInfo(state,goodsinfo){
			// 修改购物车中商品的数量值
			state.carList.some(item=>{
				if(item.id==goodsinfo.id){
					item.count=parseInt(goodsinfo.count)
					return true;
				}
			});
			// 当修改完商品的数量，把最新的购物车数据，保存到 本地存储中
			localStorage.setItem('carList',JSON.stringify(state.carList));
        },
        removeFormCarList(state,id){
            // 根据Id，从 store 中的购物车中删除对应的那条商品数据
            state.carList.some((item,index)=>{
                if(item.id==id){
                    state.carList.splice(index,1);
                    return true;
                }
            });
            // 将删除完毕后的，最新的购物车数据，同步到 本地存储中
			localStorage.setItem('carList',JSON.stringify(state.carList));
		},
		updateGoodsSelected(state,info){
			state.carList.some(item=>{
				if(item.id==info.id){
					item.selected=info.selected;
				}
			});
			// 把最新的 所有购物车商品的状态保存到 store 中去；
			localStorage.setItem('carList',JSON.stringify(state.carList));
		}
	},
	getters: {
		// 注意：这里的 getters，只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations；
		getAllCount: function(state){
			var c=0;
			state.carList.forEach(item=>{
				c+=item.count;
			});
			return c;
		},
		getGoodsCount(state){
			var o={}
			state.carList.forEach(item=>{
				o[item.id]=item.count;
			});
			return o;
		},
		getGoodsSelected(state){
			var o={}
			state.carList.forEach(item=>{
				o[item.id]=item.selected;
			});
			return o;
		},
		getGoodsCountAndAmount(state){
			var o={
				count: 0, // 勾选的数量
				amount: 0 // 勾选的总价
			}
			state.carList.forEach(item=>{
				if(item.selected){
					o.count+=item.count;
					o.amount+=item.price*item.count;
				}
			});
			return o;
		}
		// 经过咱们回顾对比，发现 getters 中的方法，和组件中的过滤器比较类似，因为 过滤器和getters 都没有修改原数据，都是把原数据做了一层包装，提供给了 调用者；
		// 其次，getters 也和 computed 比较像，只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么就会立即触发 getters 的重新求值；
	}
});
// 总结：
// 1. state 中的数据，不能直接修改，如果想要修改，必须通过 mutations；
// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.*** ；
// 3. 如果组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'，唯一的一个参数)；
// 4. 如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，那么，推荐使用 getters，如果需要使用 getters，则用 this.$store.getters.*** ；

// 设置请求的根路径
// Vue.http.options.root = 'http://vue.studyit.io'; 
// 全局设置 post 时候表单数据格式组织形式 application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;

// 导入MUI的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

// 按需导入 Mint-UI中的组件
// import { Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui';
// Vue.component(Header.name,Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);
import MintUI from 'mint-ui'
Vue.use(MintUI);
import 'mint-ui/lib/style.css'

// 安装 图片预览插件
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)


// 1.3 导入自己的 router.js 路由模块
import router from './router.js'

// 导入 App 根组件
import app from './App.vue'

var vm =new Vue({
	el: '#app',
	render: c=>c(app),
	router,  //1.4 挂载路由对象到 VM 实例上
	store, //3.5 将 vuex 创建的 store 挂载到 VM 实例上，只要挂载到了 vm 上，任何组件都能使用 store 来存取数据
});